<template>
  <div class="carousel">
    <el-carousel :interval="10000" type="card" :autoplay="false" height="200px">
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div class="carousel-item-image" :style="{backgroundImage:'url('+item.picUrl+')'}" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import { banner } from '@/api/index'
export default {
  data() {
    return {
      banners: [
        { id: null, picUrl: null },
        { id: null, picUrl: null },
        { id: null, picUrl: null },
        { id: null, picUrl: null },
        { id: null, picUrl: null },
        { id: null, picUrl: null },
        { id: null, picUrl: null }
      ]
    }
  },
  mounted() {
    this.getBanner()
  },
  methods: {
    getBanner() {
      banner().then(res => {
        this.banners = res.banners
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.carousel {
  padding: 20px 0;
  .el-carousel__item {
    .carousel-item-image {
      display: block;
      background-size: cover;
      // width: 445px;
      width: 455px;
      height: 200px;
      background-position: 50% 50%;
    }
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>
